{include file="common/header"/}

<div class="lemo-container">
    <div class="lemo-main">
		<div class="admin-main layui-anim layui-anim-upbit">
		    <fieldset class="layui-elem-field layui-field-title">
		        <legend>详情</legend>
		        <blockquote class="layui-elem-quote">
		            <div class="lemo-table">
						<input type="hidden" name="id" value="{$id}"/>
		                <div class="layui-inline">
		                    <input type="text" name="test1" id='test1'  placeholder="时间查询" value="{$addtime}" autocomplete="off" class="layui-input">
		                </div>
		                <a  href="javascript:;" class="layui-btn data-add-btn layui-btn-sm" lay-submit="" lay-filter="add" id="search1">
		                    {:lang('search')}
		                </a>
		                <!-- <a  href="javascript:;" class="layui-btn layui-btn-sm layui-btn-danger reset" lay-filter="reset" id="reset">
		                    重置
		                </a> -->
		                <!-- <a data-href='{:url("add")}' href="javascript:;" class="layui-btn layui-btn-sm layui-btn-warm add">{:lang('add')}</a> -->
		            </div>
		        </blockquote>
		    </fieldset>
		    <div style="width: 60%;height: 700px" id="monitor"></div>
		</div>
        <div class="admin-main layui-anim layui-anim-upbit">
            <fieldset class="layui-elem-field layui-field-title">
               <!-- <legend>页面分析</legend>
                <div>
					
				</div> -->
				
            </fieldset>
           
        </div>
    </div>
</div>


<script type="text/html" id="action">
    <a data-href="{:url('detail')}?id={{d.id}}" class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">查看详情</a>
    <!-- <a data-href="{:url('edit')}?id={{d.id}}" class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">{:lang('edit')}</a> -->
    <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">{:lang('delete')}</a> -->
</script>

<script src="/static/plugins/echarts/echarts.min.js" charset="utf-8"></script>
<script src="/static/plugins/echarts/echarts-theme.js" charset="utf-8"></script>
{include file="common/footer"/}
<script>
    layui.config({
        base: "/static/admin/js/",
        version: true
    }).extend({
        Admin: 'Admin'
    }).use(['element','form', 'layer', 'Admin','table','laydate'], function () {
        var $ = layui.jquery,
			laydate = layui.laydate;
		laydate.render({
		  elem: '#test1'
		  ,range: true //或 range: '~' 来自定义分割字符
		});
        var info  = {:json_encode($result)};
        var res  = {:json_encode($res)};
		// console.log(info)
		// console.log(res)
        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('monitor'));
		var options = {
		  title: {
		    text: '转化漏斗'
		  },
		  tooltip: {
		    trigger: 'item',
		    formatter: '{a} <br/>{b} : {c}次'
		  },
		  toolbox: {
		    feature: {
		      dataView: { readOnly: false },
		      restore: {},
		      saveAsImage: {}
		    }
		  },
		  legend: {
		    data: res
		  },
		  series: [
		    {
		      name: 'Expected',
		      type: 'funnel',
		      left: '10%',
		      width: '80%',
		      label: {
		        formatter: '{b}Expected'
		      },
		      labelLine: {
		        show: false
		      },
		      itemStyle: {
		        opacity: 0.7
		      },
		      emphasis: {
		        label: {
		          position: 'inside',
		          formatter: '{b}Expected: {c}'
		        }
		      },
		      data: info
		    },
		  ]
		};
		
        echartsRecords.setOption(options);
        
        // echarts 窗口缩放自适应
        window.onresize = function(){
            echartsRecords.resize();
        }
		//搜索
		$(document).on('click','#search1',function(){
		    var addtime = $('#test1').val();
		    var id = $('input[name="id"]').val();
		    // if(!$keys){
		    //     return layer.msg('请输入关键词');
		    // }
		    window.location.href = "/admin/Page/detail?id=" + id + "&addtime=" + addtime
		});
    });
</script>